<template>
  <div>
    <div class="card" style="margin-bottom: 5px">
      <el-input v-model="data.name" prefix-icon="Search" style="width: 240px; margin-right: 10px" placeholder="请输入宠物店名称"></el-input>
      <el-button type="info" plain @click="load">查询</el-button>
      <el-button type="warning" plain style="margin: 0 10px" @click="reset">重置</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px">
      <el-table tooltip-effect="dark myTooltip" stripe :data="data.tableData">
        <el-table-column prop="username" label="账号"></el-table-column>
        <el-table-column prop="name" label="宠物店名称"></el-table-column>
        <el-table-column prop="avatar" label="头像">
          <template v-slot="scope">
            <el-image style="width: 40px; height: 40px; border-radius: 50%; display: block" v-if="scope.row.avatar"
                      :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]" preview-teleported>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="sellPet" label="销售宠物">
          <template #default="scope">
            <el-tag style="margin-bottom: 5px" type="primary" v-for="item in JSON.parse(scope.row.sellPet || '[]')">{{  item }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
        <el-table-column prop="introduce" label="介绍" show-overflow-tooltip></el-table-column>
        <el-table-column prop="email" label="邮件"></el-table-column>
        <el-table-column prop="role" label="角色">
          <template #default="scope">
            <div v-if=" scope.row.role === 'USER' ">普通用户</div>
            <div v-if=" scope.row.role === 'PETSHOP' ">宠物店</div>
            <div v-if=" scope.row.role === 'ADMIN' ">管理员</div>
          </template>
        </el-table-column>
        <el-table-column prop="practiceLicense" label="认证图片">
          <template v-slot="scope">
            <el-image style="width: 50px; height: 30px; display: block" v-if="scope.row.practiceLicense"
                      :src="scope.row.practiceLicense" :preview-src-list="[scope.row.practiceLicense]" preview-teleported>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="principalName" label="负责人名称"></el-table-column>
        <el-table-column prop="principalNo" label="负责人身份证号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="status" label="认证状态">
          <template v-slot="scope">
            <el-tag type="warning" v-if="scope.row.status === '待提交'">待提交</el-tag>
            <el-tag type="info" v-if="scope.row.status === '待审核'">待审核</el-tag>
            <el-tag type="success" v-if="scope.row.status === '审核通过'">审核通过</el-tag>
            <el-tag type="danger" v-if="scope.row.status === '审核拒绝'">审核拒绝</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right" header-align="center">
          <template v-slot="scope">
            <el-button v-if="scope.row.status === '待审核'" type="success" plain @click="audit(scope.row, '审核通过')">通过</el-button>
            <el-button v-if="scope.row.status === '待审核'" type="danger" plain @click="audit(scope.row, '审核拒绝')">拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="card" v-if="data.total">
      <el-pagination
          @current-change="load"
          @size-change="handleSizeChange"
          background layout="total, prev, pager, next, jumper, sizes"
          :page-sizes="[1, 3, 5, 10, 15, 20, 30]"
          :page-size="data.pageSize"
          v-model:current-page="data.pageNum"
          :total="data.total"/>
    </div>

  </div>
</template>
<script setup>
  import {reactive} from 'vue'
  import request from '@/utils/request.js'
  import { ElMessage, ElMessageBox } from 'element-plus'

  const data = reactive({
    pageNum: 1,
    pageSize: 10,
    name: null,
    tableData: [],
    total: 0,
  })

  const load = () => {
    request.get('/petShop/pageQuery', {
      params:{
        pageNum: data.pageNum,
        pageSize: data.pageSize,
        name: data.name
      }
    }).then(res => {
      if (res.code === '200') {
        data.tableData = res.data?.list || []
        data.total = res.data?.total
      } else {
        ElMessage.error(res.msg)
      }
    })
  }

  const reset = () => {
    data.name = null;
    load()
  }

  const handleSizeChange = (newSize) => {
    data.pageSize = newSize
    data.pageNum = 1
    load()
  }

  load()


  const audit = (row, status) => {
    ElMessageBox.confirm('您确定' + status + '吗?', '确认', { type: 'warning' }).then(res => {
      let form =  JSON.parse(JSON.stringify(row))
      form.status = status
      request.put('/petShop/identify/audit', {
        id: form.id,
        status: form.status
      }).then(res => {
        if (res.code === '200') {
          ElMessage.success('操作成功')
          data.formVisible = false
          load()
        } else {
          ElMessage.error(res.msg)
        }
      })
    }).catch()
  }
</script>

<style>
  .myTooltip {
    max-width: 40% !important;
  }
</style>